{% extends "layout.html" %}
{% block css %}
 <link rel="stylesheet" type="text/css" href="{{url('/assets/css/plugins/iCheck/custom.css')}}">
<style>
.form-horizontal select.m-b{padding-top: 3px}
span.select2-container {
    z-index:10050;
}
.tr-close{
   display: none;
}
</style>
{% endblock %}
{% block content %}
<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-9">

                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>权限管理 <small>权限列表</small></h5>
                        <div class="ibox-tools"></div>
                    </div>
                    <div class="col-xs-5 col-md-5">
                        
                        <!--新增按钮-->
                        <button type="button" disabled="disabled" id="selectedBtn" onClick="add(this)"  class="btn btn-w-m btn-primary"><i class="fa fa-plus-circle"></i> 确实授权</button></a>
                        <a onClick="javascript:window.location.reload();"><button type="button" class="btn btn-w-m btn-info"><i class="fa fa-undo"></i> 刷新页面</button></a>
                    
                    </div>
                    
                    
                    <div class="col-xs-6 col-md-6">
                        <div class="input-group m-b">
                            <div class="input-group-btn">
                                <button data-toggle="dropdown" class="btn btn-white" type="button" aria-expanded="false">
                                   查询条件
                                </button>
                            </div>
                            <input placeholder="权限题目 " type="text" class="form-control" name="" value=""  id='tablesSearch'>
                            <span class="input-group-btn"><button  id="searchButton" type="button" class="btn btn-primary">搜索</button></span>
                        </div>
                    </div>
                    
                    <div class="col-xs-12 col-md-12">
                        <a class="btn btn-danger btn-rounded">当前角色 : [{{role_id}}] {{role_name}} </a>
                    </div> 
                    
                    <div class="ibox-content">
                        <table id="dataTables" class="table table-striped table-bordered table-hover">
                            <thead>
                                <tr>
                                    <th>选择</th>
                                    <th>名称</th>
                                    <th>路由</th>
                                    <th>状态</th>
                                    <th>添加时间</th>
                                </tr>
                            </thead>
                            <tbody>
                               
                            </tbody>
                            <tfoot>
                                <tr>
                                    <th>选择</th>
                                    <th>名称</th>
                                    <th>路由</th>
                                    <th>状态</th>
                                    <th>添加时间</th>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
            <div class="col-sm-3 animated fadeInRight">
                <div class="mail-box-header">
                    <h5>权限管理 <small>数据权限</small></h5>
                    <div class="mail-tools tooltip-demo m-t-md">
                        <button class="btn btn-info btn-sm" data-toggle="tooltip" data-placement="left" title="刷新列表"><i class="fa fa-refresh"></i> 刷新列表</button>
                        <button class="btn btn-primary btn-sm" data-toggle="tooltip" data-placement="top" title="确定授权"><i class="fa fa-toggle-on"></i> 确定授权</button>
                    </div>
                </div>
                <div class="mail-box">

                    <div class="ibox-content">
                        <div class="panel-body">
                            <div class="panel-group" id="accordion">



                                <div class="panel panel-primary">
                                    <div class="panel-heading">
                                        <h5 class="panel-title">
                                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" class="collapsed">学生管理</a>
                                        </h5>
                                    </div>
                                    <div id="collapseOne" class="panel-collapse collapse in" aria-expanded="true" style="">
                                        <div class="panel-body">
                                            Bootstrap相关优质项目推荐 这些项目或者是对Bootstrap进行了有益的补充，或者是基于Bootstrap开发的
                                        </div>
                                    </div>
                                </div>




                                <div class="panel panel-primary">
                                    <div class="panel-heading">
                                        <h4 class="panel-title">
                                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" class="collapsed" aria-expanded="false">标题 #2</a>
                                        </h4>
                                    </div>
                                    <div id="collapseTwo" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
                                        <div class="panel-body">
                                            Bootstrap相关优质项目推荐 这些项目或者是对Bootstrap进行了有益的补充，或者是基于Bootstrap开发的
                                        </div>
                                    </div>
                                </div>
                                <div class="panel panel-default">
                                    <div class="panel-heading">
                                        <h4 class="panel-title">
                                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree" class="collapsed" aria-expanded="false">标题 #3</a>
                                        </h4>
                                    </div>
                                    <div id="collapseThree" class="panel-collapse collapse" aria-expanded="false">
                                        <div class="panel-body">
                                            Bootstrap相关优质项目推荐 这些项目或者是对Bootstrap进行了有益的补充，或者是基于Bootstrap开发的
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

        </div>
    </div>
    
   
</body>
{% endblock %}

{% block script %}
    <!-- Data Tables -->
    <script src="{{url('/assets/js/plugins/dataTables/jquery.dataTables.js')}}"></script>
    <script src="{{url('/assets/js/plugins/dataTables/dataTables.bootstrap.js')}}"></script>
    <script src="{{url('/assets/js/plugins/layer/layer.min.js')}}"></script>
  
    <!-- iCheck -->
    <script src="{{url('/assets/js/plugins/iCheck/icheck.min.js')}}"></script>
<script>
        
    $(document).ready(function () {
        
        dataTablesFunction();  // 默认模态框

        // 点击搜索
        $('#searchButton').click(function(){
            var Tables = dataTablesFunction();
        });
       
    });
    
    // 是否开始选课按钮
    var isDisableFunc = function(status){
        var selectObj = $('#selectedBtn');
        switch(status){
            case 1:
                selectObj.prop("disabled", true);
                break;
            case 2:   
                selectObj.prop("disabled", false);
                break;
        }
    };
    // 初始化
    var aIDs = new Array();
    var inputCheck = function(){
         // 选择框
        $('.i-checks').iCheck({
            checkboxClass: 'icheckbox_square-green',
            radioClass: 'iradio_square-green'
        });
        // 选中状态
        $('.i-checks').on('ifChecked', function(event){  // 选中
            var id = $(this).val();
           
            var permission_id = "{{permission_id}}";
            if(!permission_id){
                var tr = $(this).parents('tr.tr-open');  // 处理父类选中状态
                var tid = tr.attr('id');
                $('tr.tr-open-'+tid).find('.i-checks').iCheck('check');
            }

            aIDs.push(id);  // 添加元素
            console.log(aIDs);
            (aIDs.length) > 0 ? isDisableFunc(2) : isDisableFunc(1);
        });

        $('.i-checks').on('ifUnchecked', function(event){  // 取消
            var id = $(this).val();
            
            var permission_id = "{{permission_id}}";
            if(!permission_id){
                var tr = $(this).parents('tr.tr-open');  // 处理父类选中状态
                var tid = tr.attr('id');
                $('tr.tr-open-'+tid).find('.i-checks').iCheck('check');
            }
            
            aIDs.remove(id);  // 删除元素
            console.log(aIDs);
            (aIDs.length) > 0 ? isDisableFunc(2) : isDisableFunc(1);
        });
        return true;
    };
    
    
    // 编辑时初始化设置值
    var initEdit  = function(){
        var permission_id = "{{permission_id}}";
        if(permission_id){
            var permission_array = permission_id.split(',');
            console.log(permission_array);
            $('input.i-checks').each(function(){
                var id = $(this).val();
                var isEdit = jQuery.inArray( id, permission_array); 
                if(isEdit >= 0 ){  // 在数组内
                    $("input.i-checks[value='"+id+"']").iCheck('check'); // 表示选中
                }
            }); 
        }
    };
    
    
    
     
    //Array.prototype  属性表示 Array 构造函数的原型，并允许您向所有Array对象添加新的属性和方法。
    // 删除数组中某一个元素
    if(!Array.prototype.indexOf) {
        Array.prototype.indexOf = function(val) {
            for (var i = 0; i < this.length; i++) {
                if (this[i] == val) return i;
            }
            return -1;
        };
    }
    if(!Array.prototype.remove) {
        Array.prototype.remove = function(val) {
            var index = this.indexOf(val);
            if (index > -1) {
                this.splice(index, 1);
            }
        };
    }
    
    



    //执行添加操作
    var add = function(that){
        //感谢您，在线选课 ?
        var role_id = "{{role_id}}";
        if(!role_id){
            layer.msg("请选择学生", {icon: 2});
            return false;
        }

        layer.alert('您确定要进行授权操作吗 ?', {
            icon: 3,
            title:"授权"
        }, function(index){
            var addUrl = "{{ url('/role/auth.html')|raw}}";
            $.post( addUrl ,{ "permission_id": aIDs,"role_id":role_id}, function(data){
                if(data.valid == 0){
                    var mess = data.message.student_id;
                    layer.msg( mess, {icon: 3});
                }else{
                    var icon = 2;
                    if(data.status == 900901){
                        icon = 1;
                    }
                    layer.msg(data.message, {icon: icon});
                }
            },'json');
        });
    };

    
    
    // 数据表格
    var dataTablesFunction = function(){
        var dataTables = $('#dataTables').dataTable({
             serverSide: true,
             processing: false,
             searching: true,
             destroy: true, //摧毁一个已经存在的Datatables，然后创建一个新的，
             paging: false, // 禁止分页,
             lengthChange: false,
             order: [[ 0, 'asc' ]],
             ajax: {
                type: "POST",
                dataType: 'json',
                url: "{{ url('/permission/getdata.html') }}",
                data: function(data){
                    var colvalue = $('#tablesSearch').val(); 
                    data.columns[1]['search']['value'] = colvalue; // 指定列进行搜索
                },
                complete: function (xhr, ts) {
                    
                    $('[data-toggle="tooltip"]').tooltip();// 提示处理
                    $('.dataTables_filter').hide(); // 隐藏搜索框
                    var trs = openTr(); // 执行隐藏和展开
                     
                    var one = inputCheck();
                    
                    var two = initEdit();
                }
            },
            rowCallback: function( row, data, index ) {
                var children = data.children;
                var len = children.length;
                var pid = data.pid;
                var id = data.id;
                $(row).attr("id", id).attr('class','tr-open');
                
                if(pid == 0){  // 顶级分类
                    
                }else{  // 子级分类
                    $(row).addClass('tr-close');
                    $(row).addClass('tr-open-'+pid);
                }
                // 有子级
                if(len > 0){
                    $('td:eq(1)', row).html(function(index,value){
                        return value+ ' <i class="fa fa-caret-down"></i>';
                    });
                }
            },
            columns: [
                {"data": "id","searchable": false,
                    "render": function (data, type, full, meta) {
                        var button = '<input  data-id="'+data+'" type="checkbox"  value="'+data+'" class="i-checks" name="auth[]">';
                        return button;
                    } 
                },
                {"data": "name","searchable": true},
                {"data": "route","orderable": false,
                    "render": function (data, type, full, meta) {
                        var code = full.method;
                        return "<code>["+code+"] "+data+"</code>";
                    }
                },
                {"data": "status","searchable": false ,
                    "render": function (data, type, full, meta) {
                        if( data == 1){
                            var title = '启用';
                        }else{
                            var title = '注销';
                        }
                        return title;
                    }
                },
                {"data": "create_time","searchable": false }
            ]
        });
        return dataTables;
    };




    
    // 处理展开操作
    var openTr = function(){
        //顶级打开
        $('.tr-open').off().on("click", function(event) {
            var id = $(this).attr('id');
            $('tr.tr-open-'+id).slideToggle("fast");
            var sid = $('tr.tr-open-'+id).attr('id');
            if(sid){
                $('tr.tr-open-'+sid+':visible').slideUp("fast");
            }
            return true;
        });
    };
    
        
</script>
{% endblock %}